<template>
  <div class="recruitment-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">招聘流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step title="增补申请" @click.native="goToStep('zenbu')">
          <template slot="icon">
            <i class="el-icon-document"></i>
          </template>
        </el-step>
        <el-step title="职位要求" @click.native="goToStep('zhiweishuoming')">
          <template slot="icon">
            <i class="el-icon-notebook-2"></i>
          </template>
        </el-step>
        <el-step title="筛选简历"  @click.native="goToStep('shaixinjianli')">
          <template slot="icon">
            <i class="el-icon-files"></i>
          </template>
        </el-step>
        <el-step title="面试安排" @click.native="goToStep('mianshianpai')">
          <template slot="icon">
            <i class="el-icon-date"></i>
          </template>
        </el-step>
        <el-step title="面试确定" @click.native="goToStep('mianshijl')">
          <template slot="icon">
            <i class="el-icon-user"></i>
          </template>
        </el-step>
        <el-step title="待聘名单" @click.native="goToStep('daipin')">
          <template slot="icon">
            <i class="el-icon-user-solid"></i>
          </template>
        </el-step>
        <el-step title="入职资料" @click.native="goToStep('rzziliao')">
          <template slot="icon">
            <i class="el-icon-folder"></i>
          </template>
        </el-step>
        <el-step title="入职审批" @click.native="goToStep('ruzhishenpi')">
          <template slot="icon">
            <i class="el-icon-s-check"></i>
          </template>
        </el-step>
        <el-step title="入职培训" @click.native="goToStep('pxqiandao')">
          <template slot="icon">
            <i class="el-icon-reading"></i>
          </template>
        </el-step>
        <el-step title="试用考核" @click.native="goToStep('shiyongkaohe')">
          <template slot="icon">
            <i class="el-icon-edit-outline"></i>
          </template>
        </el-step>
        <el-step title="正式任职" @click.native="goToStep('zhengshirenzhi')">
          <template slot="icon">
            <i class="el-icon-success"></i>
          </template>
        </el-step>
        <el-step title="学习方案" @click.native="goToStep('xuexifangan')">
          <template slot="icon">
            <i class="el-icon-collection"></i>
          </template>
        </el-step>
        <el-step title="签约合同"  @click.native="goToStep('qianyuehetong')">
          <template slot="icon">
            <i class="el-icon-document-checked"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <div class="current-step-info">
          <h3>{{ getCurrentStepTitle() }}</h3>
          <p>{{ getCurrentStepDescription() }}</p>
          <el-button type="primary" @click="handleCurrentStep">进入当前步骤</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import zenbuApi from '@/api/zenbu'

export default {
  data() {
    return {
      id: null,
      currentStep: 0,
      processData: null,
      steps: [
        { title: '增补申请', path: '/main/biao/zenbu', description: '发起人员增补申请' },
        { title: '职位要求', path: '/main/biao/zhiweishuoming', description: '填写职位说明书' },
        { title: '筛选简历', path: '/main/renshi/zhaoping/shaixinjianli',description: '筛选候选人简历' },
        { title: '面试安排', path: '/main/renshi/zhaoping/mianshianpai',description: '安排面试时间' },
        { title: '面试确定', path: '/main/biao/mianshijl', description: '记录面试结果' },
        { title: '待聘名单', path: '/main/renshi/zhaoping/daipin',description: '确定待聘人员' },
        { title: '入职资料', path: '/main/biao/rzziliao', description: '收集入职资料' },
        { title: '入职审批', path: '/main/renshi/zhaoping/ruzhishenpi',description: '审批入职申请' },
        { title: '入职培训', path: '/main/biao/pxqiandao', description: '新员工入职培训' },
        { title: '试用考核', path: '/main/renshi/zhaoping/shiyongkaohe',description: '试用期考核' },
        { title: '正式任职', path: '/main/renshi/zhaoping/zhengshirenzhi',description: '转正任职' },
        { title: '学习方案', path: '/main/renshi/zhaoping/xuexifangan',description: '制定学习计划' },
        { title: '签约合同', path: '/main/renshi/zhaoping/qianyuehetong',description: '签订劳动合同' }
      ]
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.id = id;
      this.fetchProcessData();
    }
  },
  methods: {
    async fetchProcessData() {
      try {
        const response = await zenbuApi.getDetail(this.id);
        this.processData = response.data;
        
        if (this.processData) {
          switch(this.processData.status) {
            case 'PENDING_POSITION':
              this.currentStep = 1;
              break;
            case 'PENDING_INTERVIEW':
              this.currentStep = 3;
              break;
            case 'INTERVIEW_COMPLETED':
              this.currentStep = 4;
              break;
            case 'PENDING_ENTRY':
              this.currentStep = 6;
              break;
            case 'ENTRY_COMPLETED':
              this.currentStep = 7;
              break;
            case 'TRAINING':
              this.currentStep = 8;
              break;
            case 'PROBATION':
              this.currentStep = 9;
              break;
            case 'FORMAL':
              this.currentStep = 10;
              break;
            case 'COMPLETED':
              this.currentStep = this.steps.length - 1;
              break;
            default:
              this.currentStep = 0;
          }
        }
      } catch (error) {
        this.$message.error('获取流程数据失败：' + error.message);
      }
    },
    getCurrentStepTitle() {
      return this.steps[this.currentStep].title
    },
    getCurrentStepDescription() {
      if (this.processData) {
        const step = this.steps[this.currentStep];
        let description = step.description;
        
        switch(this.currentStep) {
          case 0:
            description += `\n申请部门：${this.processData.applicationDepartment}`;
            description += `\n申请职位：${this.processData.applicationPosition}`;
            break;
          case 4:
            if (this.processData.interviewDate) {
              description += `\n面试时间：${this.processData.interviewDate}`;
            }
            break;
          case 8:
            if (this.processData.entryDate) {
              description += `\n入职时间：${this.processData.entryDate}`;
            }
            break;
        }
        return description;
      }
      return this.steps[this.currentStep].description;
    },
    handleCurrentStep() {
      const currentStepPath = this.steps[this.currentStep].path
      if (currentStepPath) {
        this.$router.push(currentStepPath)
      } else {
        this.$message.info('该步骤功能开发中')
      }
    },
    goToStep(path) {
      if (path === 'zhiweishuoming') {
        this.$router.push('/main/renshi/zhaoping/zhiweiyaoqiu')
      } else if (path === 'shaixinjianli') {
        this.$router.push('/main/renshi/zhaoping/shaixinjianli')
      } else if (path === 'mianshianpai') {
        this.$router.push('/main/renshi/zhaoping/mianshianpai')
      } else if (path === 'daipin') {
        this.$router.push('/main/renshi/zhaoping/daipin')
      } else if (path === 'ruzhishenpi') {
        this.$router.push('/main/renshi/zhaoping/ruzhishenpi')
      } else if (path === 'shiyongkaohe') {
        this.$router.push('/main/renshi/zhaoping/shiyongkaohe')
      } else if (path === 'zhengshirenzhi') {
        this.$router.push('/main/renshi/zhaoping/zhengshirenzhi')
      } else if (path === 'xuexifangan') {
        this.$router.push('/main/renshi/zhaoping/xuexifangan')
      } else if (path === 'qianyuehetong') {
        this.$router.push('/main/renshi/zhaoping/qianyuehetong')
      } else {
        this.$router.push(`/main/biao/${path}`)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitment-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    padding: 20px;
    border-top: 1px solid #EBEEF5;

    .current-step-info {
      text-align: center;

      h3 {
        color: #303133;
        margin-bottom: 10px;
      }

      p {
        color: #606266;
        margin-bottom: 20px;
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }
}
</style> 